<template>
	<view class="container" :style="{paddingBottom:isPhonex ? '150rpx !important' : '130rpx !important'}">
		<uni-popup ref="pop1" type="center" zindex>
			<view class="">
				<image class="mdimg" :src="env.FileUrl + 'food/images/brand_img002.png'" show-menu-by-longpress
					lazy-load mode="widthFix"></image>
			</view>
		</uni-popup>
		<view class="topSection">
			<view class="p_rlt topMain">
				<view class="flex align-center padding-left-lg mhdbox">
					<view class="imgbox">
						<image class="img" :src=" isLogin ?(userStore.userInfo.vphoto?env.imgBaseUrl + userStore.userInfo.vphoto:'../../../static/default_avos.png') : '../../../static/default_avos.png'"
							mode="aspectFit"></image>
					</view>
					<view class="flex-sub padding-left text-c0 flex align-center">

						<view v-if="isLogin" class="flex-sub padding-tb">
							{{userStore.userInfo.vnick || '微信用户'}}
						</view>
						<view v-else class="flex-sub padding-tb text-xll" @click.stop="toLogin">
							请点击登录
						</view>
						<!-- <view class="d_ib padding-sm">
							<view class="d_ib">
								<text class="fcon-erweima hdqrbox d_ib"></text>
							</view>
						</view> -->
					</view>
				</view>
				<view class="tybox text-center" :class="{show:showVip}">
					<view class="tm_content d_ib"
						@click="(!isLogin||(isLogin&&userInfo.loaded&&userInfo.ismallvip!='1'&&!userInfo.nums))?showVip=!showVip:''">
						<view class="flex align-center">
							<view class="flex-sub flex align-center">
								<image class="vipIco" :src="'https://cdn-static.yekjx.com/' + 'food/images/vip_ico.png'"
									mode="aspectFit"></image>
								<view class="text-xll text-bold text-white">
									炖大侠饭卡
								</view>
							</view>
							<block v-if="(userInfo.loaded&&userInfo.ismallvip!='1'&&!userInfo.nums)||!isLogin">
								<uni-transition mode-class="fade" :show="showVip" ref="ani" style="height: 64rpx;">
									<view v-if="showVip" class="d_ib ktvip text-c3"
										@click.stop="mnavTo('/pages/user/openVip/openVip',true)">
										立即开通<text class="fcon-Vector shop_icos"></text>
									</view>
								</uni-transition>
								<uni-transition mode-class="fade" :show="!showVip" ref="ani">
									<text v-if="!showVip" class="text-lg"
										@click.stop="mnavTo('/pages/user/openVip/openVip',true)">去开通></text>
								</uni-transition>

							</block>
							<text v-else class="fcon-VIP text-xl"></text>
						</view>
						<view class="margin-top-xxs text-left lh_z text-bold" v-if="!userInfo.nums">
							<!-- <view class="text-white text-sm padding-top-sm">
								低于市均价，品质不打折
							</view> -->
							<view class="ktfwfont">
								开通即享三大服务
							</view>
							<view class="ddxText" >
								饭卡可在颐而康连锁门店、精选商城、炖大侠进行消费
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-lr-sm p_rlt b_box">
			<view class="centSec margin-top-xs flex align-center text-center lh_z">
				<view class="p_rlt flex-sub" @click="mnavTo('/pages/user/mycard/mycard')">
					<view class="text48 text-bold padding-lr-xs">
						<view class="text48 text-bold padding-lr-xs">
							<view class="d_ib p_rlt">
								{{userInfo.amount||'0.00'}}
							</view>
						</view>
					</view>
					<view class="text-sm padding-top-xs">
						我的卡<text v-if="userInfo.nums">({{userInfo.nums}})</text>
					</view>
				</view>
				<view class="flex-sub p_rlt" @click="changeLookStates('/pages/user/coupon/coupon','coup')">
					<view class="text48 text-bold padding-lr-xs">
						<view class="d_ib p_rlt">
							{{total_money_num||0}}<text class="text-red ryuand" v-if="!userStore.coups.status&&total_money_num!='0'">•</text>
						</view>
					</view>
					<view class="text-sm padding-top-xs">
						优惠券(张)
					</view>
				</view>
				<view class="flex-sb1" @click="changeLookStates('/pages/user/vipCoupon/vipCoupon','vipCoup')">
					<view class="text48 text-bold padding-lr-xs">
						<view class="d_ib p_rlt">
							{{vip_total_money||0}}<text class="text-red ryuand" v-if="!userStore.vipCoups.status&&vip_total_money!='0'">•</text>
						</view>
					</view>
					<view class="text-sm padding-top-xs">
						VIP专区券(元)
					</view>
				</view>
			</view>
			<view class="centSec p_rlt margin-top-sm">
				<view class="flex align-center fullw">
					<view class="text-xll flex-sub padding-tb-sm padding-left">
						我的订单
					</view>
				</view>
				<scroll-view class="navScr" scroll-x="true">
					<view class="nav padding-left-xs">
						<view v-for="(item,index) in navList" :key="index" :id="'id'+index" :data-nid="index"
							@click="tapOdItem(item,index)" class="d_ib">
							<view class="navItem lg text-center flex flex-direction justify-center p_rlt">
								<view class="">
									<view class="d_ib icoBox text-acenter">
										<image class="icoimg" :src="'https://cdn-static.yekjx.com/'+item.src"
											mode="aspectFit"></image>
										<!-- <text :class="'hcon-ord_ico'+item.id"></text> -->
									</view>
								</view>
								<view class="text-lg text-c6 padding-top-xs">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="scr_step" :style="'width:'+(stepWidth)+'rpx'">
					<view class="p_rlt stbox">
						<view class="stpitem" :style="'left:'+(dianLeft)+'rpx'"></view>
					</view>
				</view> -->
			</view>
			<view class="botSec margin-top-sm padding-bottom-xs">
				<view class="text-xll padding-tb-sm padding-left">
					常用功能
				</view>
				<view class="flex flex-wrap padding-left-xs">
					<view v-for="(item,index) in botList" :key="index" @click="tapBotItem(item)"
						class="navItem lg text-center flex flex-direction justify-center p_rlt">
						<view class="">
							<view class="d_ib icoBox c0 text-acenter">
								<text :class="item.ico"></text>
							</view>
						</view>
						<view class="text-lg text-c6 padding-top-xxs">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <loading :imgSrc="'https://cdn-static.yekjx.com/food/ico/images/loading_ico01.gif'"></loading> -->
		<tabbar :thisCurrent="curRoute"></tabbar>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import global from '@/utils/global';
	import { onShow,onLoad } from '@dcloudio/uni-app';
	import { queryMemberDetail, getCredAccount, totalCouponAmount } from '@/api/vmeitime-http/index.js';
	import { mnavTo, showLoading, hideLoading,getSystemPhoneX } from '@/utils/helper';
	import {takeUserInfo} from '@/utils/public';
	import mapi from '@/utils/mapi'
	import { env } from '@/api/env.js'
	import { useUserStore } from '@/stores/commonStore';
	const userStore = useUserStore();
	const pop1 = ref()//健康顾问弹窗
	const vip_total_money = ref() //vip专区券
	const total_money_num = ref() //代金券
	const isLogin = ref(false)
	const showVip = ref(false)
	const isPhonex = ref<any>(false)
  const userData = ref<any>({})
	const isLooks=ref({
		cupLook:false,
		vipCupLook:false
	})
	const navList = ref(
		[
			{
				name: '全部订单',
				src: 'food/images/usnav00.png',
				url: '/pages/index/order/order'
			},
			{
				name: '待支付',
				src: 'food/images/usnav01.png',
				url: '/pages/index/order/order'
			},
			{
				name: '待评价',
				src: 'food/images/usnav02.png',
				url: '/pages/index/order/order'
			},
			{
				name: '退款',
				src: 'food/images/usnav03.png',
				url: '/pages/index/order/order'
			}

		]
	)

	const botList = ref(
		[
			{
				name: '邀请有礼',
				islg: true,
				type: '',
				url: '/pages/user/brandIntr/brandIntr?type=1001',
				ico: 'fcon-my-01'
			},
			{
				name: '送餐地址',
				islg: false,
				type: '',
				url: '/pages/others/addressList/addressList',
				ico: 'fcon-my-02'
			},
			{
				name: '联系客服',
				islg: true,
				type: 'kefu',
				url: 'https://yek-ddx.soboten.com/chat/h5/v6/index.html',
				ico: 'fcon-my-03'
			},
			{
				name: '设置',
				islg: false,
				type: '',
				url: '/pages/user/setting/setting',
				ico: 'fcon-my-04'
			},
			{
				name: '门店列表',
				islg: true,
				type: '',
				url: '/pages/others/shopList/shopList',
				ico: 'fcon-my-05'
			},
			{
				name: '品牌故事',
				islg: true,
				type: '',
				url: '/pages/user/brandIntr/brandIntr?type=1002',
				ico: 'fcon-my-06'
			},
			{
				name: '反馈建议',
				islg: true,
				type: '',
				url: '/pages/user/feedback/feedback',
				ico: 'fcon-my-07'
			},
			{
				name: '健康顾问',
				islg: true,
				type: 'modal',
				url: '',///pages/user/brandIntr/brandIntr?type=1003
				ico: 'fcon-my-08'
			},
			{
				name: '发票',
				islg: true,
				type: '',
				url: '/pages/others/invoiceRecords/invoiceRecords',
				ico: 'fcon-my-09'
			},
      {
      	name: '我的评价',
      	islg: true,
      	type: '',
      	url: '/pages/user/myEvaluation/myEvaluation',
      	ico: 'fcon-pinglun'
      },
			// {
			// 	name: '健康',
			// 	islg: true,
			// 	type: '',
			// 	url: '/pages/health/healthManage/healthManage',
			// 	ico: 'fcon-my-10'
			// }
		]
	)

	const tapBotItem = (item : any) => {
		if(item.type=='kefu'){
			goSobotUrl(item.url,'69b4825bbba8408b883962c570a6287f')
			return
		}
		item.type == 'modal' && pop1?.value?.open()
		item.url && mnavTo(item.url, item.islg)
	}
	const goSobotUrl = (url, sysnum) => {
	  console.log('url', url);
	  if (!url) return;
	  if (url.substring(0, 5) == 'https' || url.substring(0, 3) == 'www') {
	    mnavTo('/pages/user/sobot_common/sobot_common?urlPath=' + encodeURIComponent(JSON.stringify(url)) + '&paramData=' + encodeURIComponent(JSON.stringify({ sysnum: sysnum })))
	
	  } else {
	    mnavTo(url)
	  }
	}
  
	const toLogin = () => {
		mnavTo('/pages/login/login')
	}
	const curRoute = ref<any>('');
	const routes = getCurrentPages();
	console.log('home-routes',routes)
	curRoute.value = routes[routes.length - 1].route;
	onLoad(()=>{
		isPhonex.value = getSystemPhoneX();
	})
	onShow(() => {
		// showLoading()
		showVip.value=false;
		isLogin.value = uni.getStorageSync(global.IS_LOGIN) || false;
		isLogin.value ?loadData():rezStatus();
		isLogin.value && getCredAccountData();
		isLogin.value && getTotalCouponAmount();
		isLogin.value &&takeUserInfo();//userStore.userInfo.vphone
	})
	const userInfo = ref<any>({ abnormal: false, loaded: false })
	const rezStatus =()=>{
		userInfo.value.amount='0.00'
		vip_total_money.value='0'
		total_money_num.value='0'
	}
	const loadData = async () => {

		if (isLogin.value) {
			try {
				let res = await queryMemberDetail()
				if (res.result && res.object) {
					userInfo.value = res.object || {};
					if(res.object.card_no&&res.object.card_no!=''){
						userInfo.value.ismallvip='1'
					}
					userInfo.value.loaded = true;
  
				} else {
					// 卡异常处理++
					userInfo.value = {};
				}
				userInfo.value.loaded = true;
			} catch (e) {
				console.error(e);
			}


		} else {

		}
	}
	const changeLookStates=(urls:any,source:any)=>{
		mnavTo(urls)
		switch (source){
			case 'coup': 
			userStore.setCoupsStatus(true)
				break;
			case 'vipCoup':
			userStore.setVipCoupsStatus(true)
				break;	
			default:
				break;
		}
	}
	const tapOdItem = (item : any, index : any) => {
		console.log(item.url)
		uni.setStorageSync('index_key', index.toString());
		uni.switchTab({
			url: item.url
		})
	}
	//专区券总数
	const getCredAccountData = async () => {
		try {
			// showLoading()// smid: ''
			let res = await getCredAccount({
				
			})
			// console.log('VIP专区券数量', res)
			if (res) {
				// hideLoading();
				vip_total_money.value = res.object.total_money || 0
				if(userStore.vipCoups.count<vip_total_money.value){
				    userStore.setVipCoupsStatus(false)
				}
				userStore.setVipCoupsCount(vip_total_money.value)
			}
		} catch (e) {
			hideLoading();
			// mapi.msg('获取数据失败!');
		}
	}

	//代金券总数

	const getTotalCouponAmount = async () => {
		try {
			// showLoading()
			let res = await totalCouponAmount({})
			console.log('代金券资格数量', res)
			if (res) {
				// hideLoading();
				total_money_num.value = res.object || 0
				if(userStore.coups.count<total_money_num.value){
				    userStore.setCoupsStatus(false)
				}
				userStore.setCoupsCount(total_money_num.value)
				
			}
		} catch (e) {
			console.error('代金券资格数量', e)
			hideLoading();
			// mapi.msg('获取数据失败!');
		}
	}
  
  //用户信息
  // const getqueryMemberInfo = async () => {
  // 	try {
  // 		// showLoading()
  // 		let res = await queryMemberInfo()
		// hideLoading();
  // 		console.log('用户信息', res)
		// let nres = res.object||{};
  // 		if (res.result) {
  // 			// total_money_num.value = res.object || 0
		// 	userData.value = nres;
		// 	userStore.setUserInfo(nres)
		// 	// userData.value.vphoto = (nres.vphoto==''||!nres.vphoto) ? '../../../static/default_avos.png' : env.imgBaseUrl+nres.vphoto
  // 		}
  // 	} catch (e) {
  // 		console.error('用户信息', e)
  // 		hideLoading();
  // 		mapi.msg('网络繁忙，请稍后再试!');
  // 	}
  // }
</script>

<style lang="scss">
	.container {
		overflow-x: hidden;
		background: #F5F7F6;
	}

	.mdimg {
		// width: 90vw;
		height: 85vh;
	}

	.topSection {
		min-height: 300rpx; //320

		.topMain {
			border-radius: 850rpx/130rpx;
			height: 484rpx; //320
			overflow: hidden;
			background: linear-gradient(100deg, #5BCE97 -52.58%, #D9FFE8 94.81%);
			margin-top: -80rpx;
		}

		.mhdbox {
			padding-top: 240rpx;
		}

		.hdqrbox {
			padding: 8rpx;
			border-radius: 12rpx;
			background: rgba(0, 0, 0, 0.3);
			color: #fff;
		}
	}

	.imgbox {
		width: 116rpx;
		height: 116rpx;

		.img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			border: 3px solid #FFF;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			border: 3px solid #FFF;
		}
	}

	.tybox {
		position: absolute;
		left: -40rpx;
		bottom: -187rpx;
		width: calc(100vw + 80rpx);
		min-height: 280rpx;
		// border-radius: 850rpx/130rpx;
		// background: linear-gradient(100deg, #5BCE97 -52.58%, #D9FFE8 94.81%);
		z-index: 1;
		overflow: hidden;
		transition: bottom 0.2s ease-out;
    .ktfwfont{
      color: #FFCA74;
      font-size: 32rpx;
      margin-top: 40rpx;
      font-weight: 700;
    }
    .ddxText{
      color: #FFF;
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      margin-top: 20rpx;
    }
		&.show {
			bottom: -35rpx;
		}
	}

	.tm_content {
		margin-top: 55rpx;
		// position: relative;
		width: calc(100vw - 40rpx);
		height: 280rpx;
		padding: 24rpx 40rpx 30rpx 60rpx;
		background: linear-gradient(90deg, #333 1.5%, #6B6B6B 100%);
		box-shadow: inset 0px -14rpx 30rpx rgba(32, 44, 102, 0.5);
		border-radius: 20rpx;
		color: #FCDE7B;

		// .ublance{
		// 	font-size: 60rpx;
		// }
		.vipIco {
			width: 46rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}

		.fcon-VIP {
			color: #333;
		}

		.ktvip {
			@include centBox(172rpx, 64rpx);
			border-radius: 64rpx;
			background: linear-gradient(270deg, #F3DBB3 0%, #D4B161 102.38%);
		}
	}

	.text48 {
		font-size: 48rpx;
	}

	.botSec,
	.centSec {
		min-height: 160rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0px 4px 12rpx 0px rgba(0, 0, 0, 0.06);
	}

	.ryuand {
		position: absolute;
		right: -30rpx;
		top: -20rpx;
	}

	.navScr {
		width: 100%;
		height: 178rpx; //200
	}

	.scr_step {
		position: absolute;
		min-width: 48rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background: #F2F2F2;
		left: 50%;
		transform: translateX(-50%);
		bottom: 28rpx;

		.stbox {
			width: 100%;
			height: 8rpx;
			border-radius: 8rpx;
		}

		.stpitem {
			position: absolute;
			width: 24rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: $base-color;
			left: 0;
			top: 0;
			transition: left 0.1s ease-out;
		}
	}

	.icoimg {
		width: 80rpx;
		height: 80rpx;
		font-size: 0;
	}

	.icoBox {
		width: 80rpx;
		height: 80rpx;
		font-size: 60rpx;
		color: $base-color;

		&.c0 {
			font-size: 58rpx;
			color: #666;
		}
	}

	.minh38 {
		min-height: 38rpx;
	}

	.navItem {
		width: 142rpx; //138 172
		height: 140rpx;

		&.lg {
			width: 172rpx;
			height: 160rpx;
		}
	}

	.bmlef {
		// width: 144rpx;

		&::after {
			content: '';
			width: 3rpx;
			height: 100rpx;
			position: absolute;
			// @include baseab(3rpx,100rpx);
			opacity: 0.5;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(133, 133, 133, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
			right: 0;
			top: 0;
			z-index: 2;
		}
	}

	.flex-sb1 {
		flex: 1.4;
	}
	.shop_icos{
		font-size: 24rpx;
		margin-left: 5rpx;
	}
</style>